import React, { Component } from "react";
import { connect } from "dva";
import { Button, Input, Row, Col, Card, Pagination, Popconfirm } from "antd";
import PushSceneAdd from "./PushSceneAdd";
import defaultImg from "../../../assets/trail.png";
import styles from "./PushScene.less";

const { Search } = Input;
const { Meta } = Card;

@connect(stores => ({
  pushSceneData: stores.pushScene
}))
export default class PushScene extends Component {
  componentDidMount() {
    this.getSceneList();
  }

  getSceneList = params => {
    this.props.dispatch({
      type: "pushScene/pushSceneQuery",
      payload: params
    });
  };

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: "pushScene/clearState" });
  }

  onModalVisibleChange(type, record = {}) {
    const { dispatch } = this.props;
    dispatch({
      type: "pushScene/setState",
      payload: { showModal: type, currentData: record }
    });
  }

  render() {
    const {
      pushSceneData: {
        pushSceneList = [],
        totalCount,
        totalPage,
        showModal,
        currentData,
        filter = {}
      },
      dispatch
    } = this.props;
    return (
      <div>
        {showModal ? (
          <PushSceneAdd
            dispatch={dispatch}
            dataSource={currentData}
            closeModal={() => {
              this.onModalVisibleChange(false);
            }}
          />
        ) : (
          <div className={styles.root}>
            <div className={styles.title}>
              <span className={styles.titleLeft}>推送场景</span>
              <div className={styles.titleRight}>
                <Button
                  type="primary"
                  onClick={() => {
                    this.onModalVisibleChange(true);
                  }}
                >
                  新增场景
                </Button>
                <Search
                  placeholder="搜索"
                  onSearch={sceneName => {
                    this.getSceneList({ sceneName, pageIndex: 1 });
                  }}
                  style={{ width: 272, marginLeft: 15 }}
                />
              </div>
            </div>
            <div className={styles.cardRow}>
              <Row gutter={16}>
                {pushSceneList.map((item, index) => (
                  <Col key={item.id || index} className="gutter-row" span={6}>
                    <div className="gutter-box">
                      <Card
                        hoverable
                        cover={
                          <img
                            alt=""
                            src={defaultImg}
                            onClick={() => {
                              this.onModalVisibleChange(true, item);
                            }}
                          />
                        }
                        actions={[
                          <Popconfirm
                            key="delete"
                            title="确定删除?"
                            onConfirm={() => {
                              dispatch({
                                type: "pushScene/pushSceneDel",
                                payload: item.id
                              });
                            }}
                          >
                            <a
                              className={styles.deleteButton}
                              onClick={e => {
                                e.preventDefault();
                              }}
                            >
                              删除
                            </a>
                          </Popconfirm>
                        ]}
                      >
                        <Meta
                          title={item.sceneName}
                          description={item.comment}
                        />
                      </Card>
                    </div>
                  </Col>
                ))}
              </Row>
              {!!pushSceneList.length && (
                <Pagination
                  total={totalCount}
                  pageSize={filter.pageSize}
                  current={filter.pageIndex}
                  showSizeChanger={true}
                  showQuickJumper={true}
                  pageSizeOptions={["8", "12", "20", "28"]}
                  showTotal={total =>
                    `共 ${total} 条记录 第 ${filter.pageIndex}/ ${totalPage}页`
                  }
                  onChange={(page, pageSize) => {
                    dispatch({
                      type: "pushScene/pushSceneQuery",
                      payload: { pageIndex: page, pageSize }
                    });
                  }}
                  onShowSizeChange={(current, size) => {
                    dispatch({
                      type: "pushScene/pushSceneQuery",
                      payload: { pageIndex: current, pageSize: size }
                    });
                  }}
                />
              )}
            </div>
          </div>
        )}
      </div>
    );
  }
}
